import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtCharts

Item {
    id: teminalPluginItem
    anchors.fill: parent

    function getGrayscaleColor(value) {
        var base = Math.max(0, Math.min(255, Math.round(value * 255)))
        return `#${base.toString(16).padStart(2, '0').repeat(3)}`
    }

    function portAdd(portName) {
        var newPort = {
            "portName": portName,
            "isSelect": false,
            "isOpen": false,
            "baudRate": "115200",
            "dataBits": "8",
            "stopBits": "1",
            "parityBits": "无",
            "timeStamp": false,
            "rollDisable": false,
            "hexReception": false,
            "hexLineFeed": false,
            "hexSending": false,
            "autoLineFeed": false,
            "isAutoSend": false,
            "autoSendInterval": "1000",
            "pattern": 1,
            "isPaus": false,
            "txNum": 0,
            "rxNum": 0
        }

        portList.append(newPort)
    }

    function portDelete(portName) {
        for (var i = 0; i < portList.count; i++) {
            if (portList.get(i).portName === portName) {
                portList.remove(i)
            }
        }
    }

    function portFindTextObject(portName) {
        var textObject = null
        for (var i = 0; i < portInteractiveRepeater.count; i++) {
            var item = portInteractiveRepeater.itemAt(i)
            if (item && portList.get(i).portName === portName) {
                textObject = item.children[0].children[0].children[0].children[0].children[0].children[0]
            }
        }

        return textObject
    }

    function ansiToHtml(text) {
        // ANSI转义序列与HTML标签的映射关系
        const ansiToHtmlMap = {
            "[0;30m": '<span style="color:black">',
            "[0;31m": '<span style="color:red">',
            "[0;32m": '<span style="color:green">',
            "[0;33m": '<span style="color:yellow">',
            "[0;34m": '<span style="color:blue">',
            "[0;35m": '<span style="color:magenta">',
            "[0;36m": '<span style="color:cyan">',
            "[0;37m": '<span style="color:white">',
            "[30m": '<span style="color:black">',
            "[31m": '<span style="color:red">',
            "[32m": '<span style="color:green">',
            "[33m": '<span style="color:yellow">',
            "[34m": '<span style="color:blue">',
            "[35m": '<span style="color:magenta">',
            "[36m": '<span style="color:cyan">',
            "[37m": '<span style="color:white">',
            "[32;22m": '<span style="color:green">',
            "[0m": '</span>',
            "[0m": '</span>',
            "[39m": '</span>',
            "[39m": '</span>'
        }

        const ansiRegex = /(\u001B\[0;30m|\u001B\[0;31m|\u001B\[0;32m|\u001B\[0;33m|\u001B\[0;34m|\u001B\[0;35m|\u001B\[0;36m|\u001B\[0;37m|\x1b\[30m|\x1b\[31m|\x1b\[32m|\x1b\[33m|\x1b\[34m|\x1b\[35m|\x1b\[36m|\x1b\[37m|\u001B\[32;22m|\u001B\[0m|\x1b\[0m|\u001B\[39m|\x1b\[39m)/g

        return text.replace(ansiRegex, match => ansiToHtmlMap[match])
    }

    function portInsertTextBeforeCursor(portName, text) {
        var textObject = portFindTextObject(portName)
        var cursorPos

        if (textObject) {
            if (textObject.isPaus) {
                return
            }

            const maxLength = 4096
            var insertLength = text.length

            if (textObject.length + insertLength > maxLength) {
                var excessLength = (textObject.length + insertLength) - maxLength
                textObject.remove(0, excessLength)
            }

            if (textObject.pattern === 0) {
                cursorPos = textObject.cursorPosition
                textObject.insert(cursorPos, text)
            } else if (textObject.pattern === 1) {
                if (text.includes('\u001B[2K\r')) {
                    portClearEntireRowText(textObject)
                    text = text.replace('\u001B[2K\r', '')
                } else if (text.includes('\b')) {
                    for (var i = 0; i < text.length; i++) {
                        if (text.charAt(i) === '\b') {
                            portMovingCursor(textObject, -1)
                        } else {
                            portDeleteTextAfterCursor(textObject, 1)
                            if (text.charAt(i) === " ") {
                                textObject.insert(textObject.cursorPosition,
                                                  "&nbsp")
                            } else if (text.charAt(i) === "\r" && text.charAt(
                                           i + 1) === "\n") {
                                textObject.insert(textObject.cursorPosition,
                                                  "<br>")
                                i++
                            } else {
                                textObject.insert(textObject.cursorPosition,
                                                  text.charAt(i))
                            }
                        }
                    }

                    return
                } else if (text === " ") {
                    textObject.insert(textObject.cursorPosition, "&nbsp")
                }

                insertLength = text.length
                if (textObject.cursorPosition !== textObject.length) {
                    portDeleteTextAfterCursor(textObject, insertLength)
                }
                cursorPos = textObject.cursorPosition
                text = text.replace(/\n/g, "<br>")
                text = ansiToHtml(text)
                textObject.visible = false
                textObject.insert(cursorPos, text)
                textObject.visible = true
            }
        }
    }

    function portClearText(portName) {
        var textObject = portFindTextObject(portName)
        if (textObject && textObject.text !== "") {
            var animation = Qt.createQmlObject(
                        'import QtQuick 2.0; PropertyAnimation { property: "color"; from: getGrayscaleColor(0.6); to: getGrayscaleColor(0.2); duration: 1000 }',
                        textObject.parent.parent.parent.parent.parent)
            animation.target = textObject.parent.parent.parent.parent.parent
            animation.start()
            textObject.text = ""
            textObject.cursorPosition = 0
        }
    }

    function portClearEntireRowText(textObject) {
        if (textObject) {

            // var removePos = textObject.length;

            // textObject.cursorPosition = textObject.length;

            // while(textObject.getText(removePos - 1, removePos) !== "<br>")
            // {
            //     console.log(textObject.getText(removePos - 1, removePos));

            //     removePos--;

            //     if(removePos === 0)
            //     {
            //         return;
            //     }
            // }

            // textObject.remove(removePos, textObject.length);
            textObject.append("")
        }
    }

    function portDeleteTextBeforeCursor(textObject, length) {
        if (textObject && length !== 0) {
            textObject.remove(textObject.cursorPosition - length,
                              textObject.cursorPosition)
        }
    }

    function portDeleteTextAfterCursor(textObject, length) {
        if (textObject && length !== 0) {
            textObject.remove(textObject.cursorPosition,
                              textObject.cursorPosition + length)
        }
    }

    function portMovingCursor(textObject, offset) {
        if (textObject) {
            textObject.cursorPosition = Math.max(
                        0, textObject.cursorPosition + offset)
        }
    }

    function portTxRxNum(portName, txNum, rxNum) {
        for (var i = 0; i < portList.count; i++) {
            if (portList.get(i).portName === portName) {
                var currentTxNum = portList.get(i).txNum
                var currentRxNum = portList.get(i).rxNum
                portList.set(i, {
                                 "txNum": currentTxNum + txNum,
                                 "rxNum": currentRxNum + rxNum
                             })
                break
            }
        }
    }

    function portFindChartObject(portName) {
        var chartObject = null
        for (var i = 0; i < portInteractiveRepeater.count; i++) {
            var item = portInteractiveRepeater.itemAt(i)
            if (item && portList.get(i).portName === portName) {
                chartObject = item.children[1].children[0]
            }
        }

        return chartObject
    }

    function portLineAppendData(portName, lineName, xData, yData) {
        var maxCount = 20
        var chartObject = portFindChartObject(portName)

        if (chartObject) {
            if (chartObject.isPaus) {
                return
            }

            var series = chartObject.series(lineName)

            chartObject.xAxis.max = xData + chartObject.xAxisDisRange
                    * (1.0 / (chartObject.xAxis.tickCount - 1))
            chartObject.xAxis.min = xData - chartObject.xAxisDisRange

            maxCount = chartObject.xAxis.max - chartObject.xAxis.min

            if (series) {
                if (series.count > maxCount) {
                    series.removePoints(0, series.count - maxCount)
                }
                series.visible = false
                series.append(xData, yData)
                series.visible = true
            } else {
                var newSeries = chartObject.createSeries(
                            ChartView.SeriesTypeSpline, lineName,
                            chartObject.xAxis, chartObject.yAxis)
                newSeries.useOpenGL = true
                newSeries.append(xData, yData)
            }
        }
    }

    function portLineYAxisScaleSet(portName, yAxisAve) {
        var chartObject = portFindChartObject(portName)

        if (chartObject) {
            chartObject.yAxis.max = yAxisAve + chartObject.yAxisDisRange / 2
            chartObject.yAxis.min = yAxisAve - chartObject.yAxisDisRange / 2
        }
    }

    function portLineClearData(portName) {
        var chartObject = portFindChartObject(portName)

        if (chartObject) {
            chartObject.removeAllSeries()
            Teminal.DeleteAllLine(portName)
        }
    }

    ListModel {
        id: portList
        objectName: "sbotFocPortList"

        property int portListFocusIndex: 0

        onCountChanged: {
            if (count === 0) {
                portSettingLoader.item.modelData = defaultData.get(0)
            }
        }

        function exchangePort(fromIndex, toIndex) {
            move(toIndex, fromIndex, 1)
            move(fromIndex - 1, toIndex, 1)
        }

        function findPortIndex(portName) {
            for (var i = 0; i < count; i++) {
                if (get(i).portName === portName) {
                    return i
                }
            }
            return -1
        }
    }

    RowLayout {
        anchors.fill: parent
        spacing: 0

        Rectangle {
            id: teminalControl
            Layout.fillHeight: true
            Layout.preferredWidth: 300
            color: "transparent"

            NumberAnimation {
                id: teminalControlHideAnimation
                target: teminalControl.Layout
                property: "preferredWidth"
                to: 0
                duration: 300
                easing.type: Easing.OutCubic
            }

            NumberAnimation {
                id: teminalControlShowAnimation
                target: teminalControl.Layout
                property: "preferredWidth"
                to: 300
                duration: 300
                easing.type: Easing.OutCubic
            }

            ColumnLayout {
                anchors.fill: parent
                spacing: 0
                visible: (teminalControl.Layout.preferredWidth < 100) ? false : true

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    radius: 5
                    color: "transparent"

                    IconImage {
                        source: "qrc:/Res/Icon/TeminalPluginLogo.png"
                        width: 90
                        height: 90
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        color: getGrayscaleColor(0.4)
                        visible: (parent.height > 90) ? true : false
                    }
                }

                Rectangle {
                    id: portBooth
                    Layout.fillWidth: true
                    Layout.preferredHeight: portBoothDefaultHeight
                    color: "transparent"

                    property int portBoothDefaultHeight: 60
                    property int portBoothHeight: portBoothDefaultHeight

                    NumberAnimation {
                        id: portListZoomAnimation
                        target: portBooth.Layout
                        property: "preferredHeight"
                        to: portBooth.portBoothHeight
                        duration: 300
                        easing.type: Easing.OutCubic
                    }

                    Rectangle {
                        id: portListRect
                        anchors.fill: parent
                        anchors.margins: 10
                        anchors.rightMargin: 0
                        anchors.bottomMargin: 0
                        radius: 10
                        color: getGrayscaleColor(0.3)

                        ListView {
                            anchors.fill: parent
                            anchors.margins: 10
                            spacing: 5
                            clip: true
                            model: portList

                            delegate: Rectangle {
                                width: parent.width
                                height: 30
                                color: (model.isSelect
                                        || isFocus) ? getGrayscaleColor(
                                                          0.4) : "transparent"
                                radius: 5

                                property bool isFocus: false

                                Text {
                                    text: model.portName
                                    color: "white"
                                    anchors.left: parent.left
                                    anchors.leftMargin: 5
                                    anchors.verticalCenter: parent.verticalCenter
                                }

                                IconImage {
                                    width: 25
                                    height: 25
                                    anchors.rightMargin: 5
                                    anchors.right: parent.right
                                    anchors.verticalCenter: parent.verticalCenter
                                    source: model.isOpen ? "qrc:/Res/Icon/LinkPort.png" : "qrc:/Res/Icon/UnLinkPort.png"
                                    color: model.isOpen ? "green" : "gray"

                                    MouseArea {
                                        anchors.fill: parent

                                        onClicked: {
                                            if (!model.isOpen) {
                                                model.isOpen = Teminal.OpenSerialPort(
                                                            model.portName)
                                            } else {
                                                Teminal.CloseSerialPort(
                                                            model.portName)
                                                model.isOpen = false
                                            }
                                            portSetting.flushLoaderData()
                                        }
                                    }
                                }

                                MouseArea {
                                    height: parent.height
                                    width: parent.width - 30
                                    anchors.left: parent.left
                                    hoverEnabled: true

                                    onClicked: function (mouse) {
                                        var index = portList.findPortIndex(
                                                    model.portName)

                                        if (index > portInteractiveWindow.layoutPattern) {
                                            portList.exchangePort(
                                                        index,
                                                        portList.portListFocusIndex)
                                        }

                                        for (var i = 0; i < portList.count; i++) {
                                            portList.get(i).isSelect = false
                                            if (portList.get(
                                                        i).portName === model.portName) {
                                                portSettingLoader.item.modelData = portList.get(
                                                            i)
                                            }
                                        }

                                        model.isSelect = true
                                    }

                                    onEntered: {
                                        parent.isFocus = true
                                    }

                                    onExited: {
                                        parent.isFocus = false
                                    }
                                }
                            }
                        }

                        IconImage {
                            width: 10
                            height: 10
                            anchors.rightMargin: 5
                            anchors.bottomMargin: 5
                            anchors.right: parent.right
                            anchors.bottom: parent.bottom
                            source: "qrc:/Res/Icon/Amplification.png"
                            color: "gray"

                            MouseArea {
                                anchors.fill: parent
                                hoverEnabled: true

                                onEntered: {
                                    parent.color = "white"
                                }

                                onExited: {
                                    parent.color = "gray"
                                }

                                onClicked: {
                                    if (portBooth.portBoothHeight
                                            != portBooth.portBoothDefaultHeight) {
                                        portBooth.portBoothHeight = portBooth.portBoothDefaultHeight
                                    } else {
                                        portBooth.portBoothHeight = portBooth.portBoothDefaultHeight
                                        for (var i = 1; i < portList.count; i++) {
                                            if (i === 4)
                                                break
                                            portBooth.portBoothHeight += 35
                                        }
                                    }
                                    portListZoomAnimation.start()
                                }
                            }
                        }

                        Rectangle {
                            anchors.fill: parent
                            color: "transparent"
                            visible: portList.count ? false : true

                            Text {
                                text: qsTr("没有检测到端口")
                                color: "white"
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.horizontalCenter: parent.horizontalCenter
                            }
                        }
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 425
                    color: "transparent"

                    Rectangle {
                        id: portSetting
                        anchors.fill: parent
                        anchors.margins: 10
                        anchors.rightMargin: 0
                        anchors.topMargin: 5
                        radius: 10
                        color: "transparent"

                        function flushLoaderData() {
                            if (portSettingLoader.item.modelData.portName === "") {
                                return
                            }
                            var index = portList.findPortIndex(
                                        portSettingLoader.item.modelData.portName)
                            portSettingLoader.item.modelData = portList.get(
                                        index)
                            Teminal.FlushSerialPortCfg(portList.get(index))
                        }

                        ListModel {
                            id: defaultData
                            ListElement {
                                portName: ""
                                isSelect: false
                                isOpen: false
                                baudRate: "未选择设备"
                                dataBits: "未选择设备"
                                stopBits: "未选择设备"
                                parityBits: "未选择设备"
                                timeStamp: false
                                rollDisable: false
                                hexReception: false
                                hexLineFeed: false
                                hexSending: false
                                autoLineFeed: false
                                isAutoSend: false
                                autoSendInterval: "1000"
                                pattern: 0
                                txNum: 0
                                rxNum: 0
                            }
                        }

                        Loader {
                            id: portSettingLoader
                            anchors.fill: parent
                            sourceComponent: portSettingPage
                            onLoaded: {
                                item.modelData = defaultData.get(0)
                            }
                        }

                        Component {
                            id: portSettingPage

                            ColumnLayout {
                                anchors.fill: parent
                                spacing: 5

                                property var modelData: null

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 150
                                    radius: 5
                                    color: getGrayscaleColor(0.3)

                                    Column {
                                        anchors.fill: parent

                                        Rectangle {
                                            width: parent.width
                                            height: 25
                                            color: "transparent"

                                            Text {
                                                text: qsTr("串口设置")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 10
                                            }

                                            IconImage {
                                                width: 15
                                                height: 15
                                                anchors.right: parent.right
                                                anchors.rightMargin: 20
                                                anchors.verticalCenter: parent.verticalCenter
                                                source: "qrc:/Res/Icon/Refresh.png"
                                                color: "gray"

                                                MouseArea {
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    onEntered: {
                                                        parent.color = "white"
                                                    }

                                                    onExited: {
                                                        parent.color = "gray"
                                                    }

                                                    onClicked: {
                                                        portSettingLoader.item.modelData.baudRate
                                                                = "115200"
                                                        portSettingLoader.item.modelData.dataBits
                                                                = "8"
                                                        portSettingLoader.item.modelData.stopBits
                                                                = "0"
                                                        portSettingLoader.item.modelData.parityBits
                                                                = "无"
                                                        portSetting.flushLoaderData()
                                                    }
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            color: "transparent"

                                            Text {
                                                text: qsTr("波特率")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 15
                                            }

                                            ComboBox {
                                                id: comboBoxBaud
                                                width: 100
                                                height: parent.height
                                                anchors.right: parent.right
                                                anchors.rightMargin: 10
                                                anchors.verticalCenter: parent.verticalCenter

                                                background: Rectangle {
                                                    color: "transparent"
                                                    radius: 5
                                                }

                                                contentItem: Text {
                                                    text: portSettingLoader.item.modelData.baudRate
                                                    color: "white"
                                                    anchors.left: parent.left
                                                    anchors.leftMargin: 10
                                                    verticalAlignment: Text.AlignVCenter
                                                }

                                                indicator: Image {}
                                                IconImage {
                                                    source: "qrc:/Res/Icon/Pull.png"
                                                    width: 15
                                                    height: 15
                                                    color: "gray"
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 10
                                                    anchors.verticalCenter: parent.verticalCenter
                                                }

                                                popup: Popup {
                                                    y: comboBoxBaud.height
                                                    width: comboBoxBaud.width
                                                    padding: 0
                                                    implicitHeight: contentItem.implicitHeight

                                                    background: Rectangle {
                                                        radius: 5
                                                        color: getGrayscaleColor(
                                                                   0.9)
                                                    }

                                                    contentItem: ListView {
                                                        model: comboBoxBaud.model
                                                        clip: true
                                                        // implicitHeight: Math.min(contentHeight, 90)
                                                        implicitHeight: contentHeight

                                                        delegate: ItemDelegate {
                                                            width: comboBoxBaud.width
                                                            height: 30
                                                            text: modelData
                                                            highlighted: ListView.isCurrentItem

                                                            background: Rectangle {
                                                                radius: 5
                                                                color: "transparent"
                                                            }

                                                            MouseArea {
                                                                anchors.fill: parent
                                                                hoverEnabled: true

                                                                onClicked: {
                                                                    comboBoxBaud.currentIndex = index
                                                                    comboBoxBaud.popup.close()
                                                                }

                                                                onEntered: {
                                                                    parent.background.color = getGrayscaleColor(0.8)
                                                                }

                                                                onExited: {
                                                                    parent.background.color = "transparent"
                                                                }
                                                            }
                                                        }
                                                    }
                                                }

                                                MouseArea {
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    onClicked: {
                                                        if (comboBoxBaud.popup.opened) {
                                                            comboBoxBaud.popup.close()
                                                        } else {
                                                            comboBoxBaud.popup.open()
                                                        }
                                                    }

                                                    onEntered: {
                                                        parent.background.color = getGrayscaleColor(
                                                                    0.4)
                                                    }

                                                    onExited: {
                                                        parent.background.color = "transparent"
                                                    }
                                                }

                                                model: ListModel {
                                                    ListElement {
                                                        text: "1200"
                                                    }
                                                    ListElement {
                                                        text: "2400"
                                                    }
                                                    ListElement {
                                                        text: "4800"
                                                    }
                                                    ListElement {
                                                        text: "9600"
                                                    }
                                                    ListElement {
                                                        text: "19200"
                                                    }
                                                    ListElement {
                                                        text: "38400"
                                                    }
                                                    ListElement {
                                                        text: "115200"
                                                    }
                                                    ListElement {
                                                        text: "256000"
                                                    }
                                                }

                                                onCurrentTextChanged: {
                                                    if (portSettingLoader.item.modelData !== null) {
                                                        portSettingLoader.item.modelData.baudRate
                                                                = currentText
                                                        portSetting.flushLoaderData()
                                                    }
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            color: "transparent"

                                            Text {
                                                text: qsTr("数据位")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 15
                                            }

                                            ComboBox {
                                                id: comboBoxDatabits
                                                width: 100
                                                height: parent.height
                                                anchors.right: parent.right
                                                anchors.rightMargin: 10
                                                anchors.verticalCenter: parent.verticalCenter

                                                background: Rectangle {
                                                    color: "transparent"
                                                    radius: 5
                                                }

                                                contentItem: Text {
                                                    text: portSettingLoader.item.modelData.dataBits
                                                    color: "white"
                                                    anchors.left: parent.left
                                                    anchors.leftMargin: 10
                                                    verticalAlignment: Text.AlignVCenter
                                                }

                                                indicator: Image {}
                                                IconImage {
                                                    source: "qrc:/Res/Icon/Pull.png"
                                                    width: 15
                                                    height: 15
                                                    color: "gray"
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 10
                                                    anchors.verticalCenter: parent.verticalCenter
                                                }

                                                popup: Popup {
                                                    y: parent.height
                                                    width: parent.width
                                                    padding: 0
                                                    implicitHeight: contentItem.implicitHeight

                                                    background: Rectangle {
                                                        radius: 5
                                                        color: getGrayscaleColor(
                                                                   0.9)
                                                    }

                                                    contentItem: ListView {
                                                        model: comboBoxDatabits.model
                                                        clip: true
                                                        implicitHeight: contentHeight

                                                        delegate: ItemDelegate {
                                                            width: parent.parent.parent.width
                                                            height: 30
                                                            text: modelData
                                                            highlighted: ListView.isCurrentItem

                                                            background: Rectangle {
                                                                radius: 5
                                                                color: "transparent"
                                                            }

                                                            MouseArea {
                                                                anchors.fill: parent
                                                                hoverEnabled: true

                                                                onClicked: {
                                                                    comboBoxDatabits.currentIndex = index
                                                                    comboBoxDatabits.popup.close()
                                                                }

                                                                onEntered: {
                                                                    parent.background.color = getGrayscaleColor(0.8)
                                                                }

                                                                onExited: {
                                                                    parent.background.color = "transparent"
                                                                }
                                                            }
                                                        }
                                                    }
                                                }

                                                MouseArea {
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    onClicked: {
                                                        if (comboBoxDatabits.popup.opened) {
                                                            comboBoxDatabits.popup.close()
                                                        } else {
                                                            comboBoxDatabits.popup.open()
                                                        }
                                                    }

                                                    onEntered: {
                                                        parent.background.color = getGrayscaleColor(
                                                                    0.4)
                                                    }

                                                    onExited: {
                                                        parent.background.color = "transparent"
                                                    }
                                                }

                                                model: ListModel {
                                                    ListElement {
                                                        text: "5"
                                                    }
                                                    ListElement {
                                                        text: "6"
                                                    }
                                                    ListElement {
                                                        text: "7"
                                                    }
                                                    ListElement {
                                                        text: "8"
                                                    }
                                                }

                                                onCurrentTextChanged: {
                                                    if (portSettingLoader.item.modelData !== null) {
                                                        portSettingLoader.item.modelData.dataBits
                                                                = currentText
                                                        portSetting.flushLoaderData()
                                                    }
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            color: "transparent"

                                            Text {
                                                text: qsTr("停止位")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 15
                                            }

                                            ComboBox {
                                                id: comboBoxStopBits
                                                width: 100
                                                height: parent.height
                                                anchors.right: parent.right
                                                anchors.rightMargin: 10
                                                anchors.verticalCenter: parent.verticalCenter

                                                background: Rectangle {
                                                    color: "transparent"
                                                    radius: 5
                                                }

                                                contentItem: Text {
                                                    text: portSettingLoader.item.modelData.stopBits
                                                    color: "white"
                                                    anchors.left: parent.left
                                                    anchors.leftMargin: 10
                                                    verticalAlignment: Text.AlignVCenter
                                                }

                                                indicator: Image {}
                                                IconImage {
                                                    source: "qrc:/Res/Icon/Pull.png"
                                                    width: 15
                                                    height: 15
                                                    color: "gray"
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 10
                                                    anchors.verticalCenter: parent.verticalCenter
                                                }

                                                popup: Popup {
                                                    y: parent.height
                                                    width: parent.width
                                                    padding: 0
                                                    implicitHeight: contentItem.implicitHeight

                                                    background: Rectangle {
                                                        radius: 5
                                                        color: getGrayscaleColor(
                                                                   0.9)
                                                    }

                                                    contentItem: ListView {
                                                        model: comboBoxStopBits.model
                                                        clip: true
                                                        implicitHeight: contentHeight

                                                        delegate: ItemDelegate {
                                                            width: parent.parent.parent.width
                                                            height: 30
                                                            text: modelData
                                                            highlighted: ListView.isCurrentItem

                                                            background: Rectangle {
                                                                radius: 5
                                                                color: "transparent"
                                                            }

                                                            MouseArea {
                                                                anchors.fill: parent
                                                                hoverEnabled: true

                                                                onClicked: {
                                                                    comboBoxStopBits.currentIndex = index
                                                                    comboBoxStopBits.popup.close()
                                                                }

                                                                onEntered: {
                                                                    parent.background.color = getGrayscaleColor(0.8)
                                                                }

                                                                onExited: {
                                                                    parent.background.color = "transparent"
                                                                }
                                                            }
                                                        }
                                                    }
                                                }

                                                MouseArea {
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    onClicked: {
                                                        if (comboBoxStopBits.popup.opened) {
                                                            comboBoxStopBits.popup.close()
                                                        } else {
                                                            comboBoxStopBits.popup.open()
                                                        }
                                                    }

                                                    onEntered: {
                                                        parent.background.color = getGrayscaleColor(
                                                                    0.4)
                                                    }

                                                    onExited: {
                                                        parent.background.color = "transparent"
                                                    }
                                                }

                                                model: ListModel {
                                                    ListElement {
                                                        text: "1"
                                                    }
                                                    ListElement {
                                                        text: "2"
                                                    }
                                                    ListElement {
                                                        text: "3"
                                                    }
                                                }

                                                onCurrentTextChanged: {
                                                    if (portSettingLoader.item.modelData !== null) {
                                                        portSettingLoader.item.modelData.stopBits
                                                                = currentText
                                                        portSetting.flushLoaderData()
                                                    }
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            color: "transparent"

                                            Text {
                                                text: qsTr("校验位")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 15
                                            }

                                            ComboBox {
                                                id: comboBoxParityBit
                                                width: 100
                                                height: parent.height
                                                anchors.right: parent.right
                                                anchors.rightMargin: 10
                                                anchors.verticalCenter: parent.verticalCenter

                                                background: Rectangle {
                                                    color: "transparent"
                                                    radius: 5
                                                }

                                                contentItem: Text {
                                                    text: portSettingLoader.item.modelData.parityBits
                                                    color: "white"
                                                    anchors.left: parent.left
                                                    anchors.leftMargin: 10
                                                    verticalAlignment: Text.AlignVCenter
                                                }

                                                indicator: Image {}
                                                IconImage {
                                                    source: "qrc:/Res/Icon/Pull.png"
                                                    width: 15
                                                    height: 15
                                                    color: "gray"
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 10
                                                    anchors.verticalCenter: parent.verticalCenter
                                                }

                                                popup: Popup {
                                                    y: parent.height
                                                    width: parent.width
                                                    padding: 0
                                                    implicitHeight: contentItem.implicitHeight

                                                    background: Rectangle {
                                                        radius: 5
                                                        color: getGrayscaleColor(
                                                                   0.9)
                                                    }

                                                    contentItem: ListView {
                                                        model: comboBoxParityBit.model
                                                        clip: true
                                                        implicitHeight: contentHeight

                                                        delegate: ItemDelegate {
                                                            width: parent.parent.parent.width
                                                            height: 30
                                                            text: modelData
                                                            highlighted: ListView.isCurrentItem

                                                            background: Rectangle {
                                                                radius: 5
                                                                color: "transparent"
                                                            }

                                                            MouseArea {
                                                                anchors.fill: parent
                                                                hoverEnabled: true

                                                                onClicked: {
                                                                    comboBoxParityBit.currentIndex = index
                                                                    comboBoxParityBit.popup.close()
                                                                }

                                                                onEntered: {
                                                                    parent.background.color = getGrayscaleColor(0.8)
                                                                }

                                                                onExited: {
                                                                    parent.background.color = "transparent"
                                                                }
                                                            }
                                                        }
                                                    }
                                                }

                                                MouseArea {
                                                    anchors.fill: parent
                                                    hoverEnabled: true

                                                    onClicked: {
                                                        if (comboBoxParityBit.popup.opened) {
                                                            comboBoxParityBit.popup.close()
                                                        } else {
                                                            comboBoxParityBit.popup.open()
                                                        }
                                                    }

                                                    onEntered: {
                                                        parent.background.color = getGrayscaleColor(
                                                                    0.4)
                                                    }

                                                    onExited: {
                                                        parent.background.color = "transparent"
                                                    }
                                                }

                                                model: ListModel {
                                                    ListElement {
                                                        text: "无"
                                                    }
                                                    ListElement {
                                                        text: "奇校验"
                                                    }
                                                    ListElement {
                                                        text: "偶校验"
                                                    }
                                                }

                                                onCurrentTextChanged: {
                                                    if (portSettingLoader.item.modelData !== null) {
                                                        portSettingLoader.item.modelData.parityBits
                                                                = currentText
                                                        portSetting.flushLoaderData()
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 90
                                    radius: 5
                                    color: getGrayscaleColor(0.3)

                                    Column {
                                        anchors.fill: parent

                                        Rectangle {
                                            width: parent.width
                                            height: 25
                                            color: "transparent"

                                            Text {
                                                text: qsTr("接收设置")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 10
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            anchors.left: parent.left
                                            anchors.leftMargin: 10
                                            color: "transparent"

                                            RowLayout {
                                                anchors.fill: parent
                                                spacing: 5

                                                Rectangle {
                                                    Layout.fillHeight: true
                                                    Layout.preferredWidth: 70
                                                    color: "transparent"

                                                    property bool isSelect: portSettingLoader.item.modelData.timeStamp

                                                    IconImage {
                                                        width: 20
                                                        height: 20
                                                        anchors.left: parent.left
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: parent.isSelect ? "green" : "gray"
                                                        source: parent.isSelect ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                        MouseArea {
                                                            anchors.fill: parent

                                                            onClicked: {
                                                                portSettingLoader.item.modelData.timeStamp = !portSettingLoader.item.modelData.timeStamp
                                                                portSetting.flushLoaderData()
                                                            }
                                                        }
                                                    }

                                                    Text {
                                                        anchors.right: parent.right
                                                        anchors.rightMargin: 10
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: "white"
                                                        text: qsTr("时间戳")
                                                    }
                                                }

                                                Rectangle {
                                                    Layout.fillHeight: true
                                                    Layout.preferredWidth: 70
                                                    color: "transparent"

                                                    property bool isSelect: portSettingLoader.item.modelData.rollDisable

                                                    IconImage {
                                                        width: 20
                                                        height: 20
                                                        anchors.left: parent.left
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: parent.isSelect ? "green" : "gray"
                                                        source: parent.isSelect ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                        MouseArea {
                                                            anchors.fill: parent

                                                            onClicked: {
                                                                portSettingLoader.item.modelData.rollDisable = !portSettingLoader.item.modelData.rollDisable
                                                                portSetting.flushLoaderData()
                                                            }
                                                        }
                                                    }

                                                    Text {
                                                        anchors.right: parent.right
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: "white"
                                                        text: qsTr("禁止滚动")
                                                    }
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            anchors.left: parent.left
                                            anchors.leftMargin: 10
                                            color: "transparent"

                                            RowLayout {
                                                anchors.fill: parent
                                                spacing: 5

                                                Rectangle {
                                                    Layout.fillHeight: true
                                                    Layout.preferredWidth: 70
                                                    color: "transparent"

                                                    property bool isSelect: portSettingLoader.item.modelData.hexReception

                                                    IconImage {
                                                        width: 20
                                                        height: 20
                                                        anchors.left: parent.left
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: parent.isSelect ? "green" : "gray"
                                                        source: parent.isSelect ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                        MouseArea {
                                                            anchors.fill: parent

                                                            onClicked: {
                                                                portSettingLoader.item.modelData.hexReception = !portSettingLoader.item.modelData.hexReception
                                                                portSetting.flushLoaderData()
                                                            }
                                                        }
                                                    }

                                                    Text {
                                                        anchors.right: parent.right
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: "white"
                                                        text: qsTr("HEX接收")
                                                    }
                                                }

                                                Rectangle {
                                                    Layout.fillHeight: true
                                                    Layout.preferredWidth: 70
                                                    color: "transparent"

                                                    property bool isSelect: portSettingLoader.item.modelData.hexLineFeed

                                                    IconImage {
                                                        width: 20
                                                        height: 20
                                                        anchors.left: parent.left
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: parent.isSelect ? "green" : "gray"
                                                        source: parent.isSelect ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                        MouseArea {
                                                            anchors.fill: parent

                                                            onClicked: {
                                                                portSettingLoader.item.modelData.hexLineFeed = !portSettingLoader.item.modelData.hexLineFeed
                                                                portSetting.flushLoaderData()
                                                            }
                                                        }
                                                    }

                                                    Text {
                                                        anchors.right: parent.right
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: "white"
                                                        text: qsTr("HEX换行")
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 90
                                    radius: 5
                                    color: getGrayscaleColor(0.3)

                                    Column {
                                        anchors.fill: parent

                                        Rectangle {
                                            width: parent.width
                                            height: 25
                                            color: "transparent"

                                            Text {
                                                text: qsTr("发送设置")
                                                color: "white"
                                                anchors.verticalCenter: parent.verticalCenter
                                                anchors.left: parent.left
                                                anchors.leftMargin: 10
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            anchors.left: parent.left
                                            anchors.leftMargin: 10
                                            color: "transparent"

                                            RowLayout {
                                                anchors.fill: parent
                                                spacing: 5

                                                Rectangle {
                                                    Layout.fillHeight: true
                                                    Layout.preferredWidth: 70
                                                    color: "transparent"

                                                    property bool isSelect: portSettingLoader.item.modelData.hexSending

                                                    IconImage {
                                                        width: 20
                                                        height: 20
                                                        anchors.left: parent.left
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: parent.isSelect ? "green" : "gray"
                                                        source: parent.isSelect ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                        MouseArea {
                                                            anchors.fill: parent

                                                            onClicked: {
                                                                portSettingLoader.item.modelData.hexSending = !portSettingLoader.item.modelData.hexSending
                                                                portSetting.flushLoaderData()
                                                            }
                                                        }
                                                    }

                                                    Text {
                                                        anchors.right: parent.right
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: "white"
                                                        text: qsTr("HEX发送")
                                                    }
                                                }

                                                Rectangle {
                                                    Layout.fillHeight: true
                                                    Layout.preferredWidth: 70
                                                    color: "transparent"

                                                    property bool isSelect: portSettingLoader.item.modelData.autoLineFeed

                                                    IconImage {
                                                        width: 20
                                                        height: 20
                                                        anchors.left: parent.left
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: parent.isSelect ? "green" : "gray"
                                                        source: parent.isSelect ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                        MouseArea {
                                                            anchors.fill: parent

                                                            onClicked: {
                                                                portSettingLoader.item.modelData.autoLineFeed = !portSettingLoader.item.modelData.autoLineFeed
                                                                portSetting.flushLoaderData()
                                                            }
                                                        }
                                                    }

                                                    Text {
                                                        anchors.right: parent.right
                                                        anchors.verticalCenter: parent.verticalCenter
                                                        color: "white"
                                                        text: qsTr("自动换行")
                                                    }
                                                }
                                            }
                                        }

                                        Rectangle {
                                            width: parent.width
                                            height: 30
                                            anchors.left: parent.left
                                            anchors.leftMargin: 10
                                            color: "transparent"

                                            Row {
                                                anchors.fill: parent

                                                property bool isSelect: portSettingLoader.item.modelData.isAutoSend

                                                IconImage {
                                                    width: 20
                                                    height: 20
                                                    anchors.verticalCenter: parent.verticalCenter
                                                    color: parent.isSelect ? "green" : "gray"
                                                    source: item.modelData.isAutoSend ? "qrc:/Res/Icon/Select.png" : "qrc:/Res/Icon/UnSelect.png"

                                                    MouseArea {
                                                        anchors.fill: parent

                                                        onClicked: {
                                                            portSettingLoader.item.modelData.isAutoSend = !portSettingLoader.item.modelData.isAutoSend
                                                            portSetting.flushLoaderData()
                                                        }
                                                    }
                                                }

                                                Rectangle {
                                                    height: parent.height
                                                    width: 200
                                                    color: "transparent"

                                                    TextField {
                                                        anchors.fill: parent
                                                        placeholderText: ">:自动发送间隔时间 " + portSettingLoader.item.modelData.autoSendInterval + "（毫秒）"
                                                        placeholderTextColor: getGrayscaleColor(0.5)
                                                        font.pixelSize: 10
                                                        color: "white"

                                                        background: Rectangle {
                                                            color: "transparent"
                                                        }

                                                        onAccepted: {
                                                            portSettingLoader.item.modelData.autoSendInterval = text
                                                            portSetting.flushLoaderData()
                                                            text = ""
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 25
                                    radius: 5
                                    color: getGrayscaleColor(0.3)

                                    property int pattern0X: 72
                                    property int pattern1X: 144
                                    property int pattern2X: 216

                                    Rectangle {
                                        id: patternIndicate
                                        width: parent.height + 10
                                        height: parent.height
                                        anchors.verticalCenter: parent.verticalCenter
                                        x: parent.pattern0X - width / 2
                                        radius: 5
                                        color: getGrayscaleColor(0.4)

                                        property int tarX: (portSettingLoader.item.modelData.pattern === 0) ? parent.pattern0X : ((portSettingLoader.item.modelData.pattern === 1) ? parent.pattern1X : parent.pattern2X)

                                        onTarXChanged: {
                                            toPatternAnimation.to = patternIndicate.tarX
                                                    - patternIndicate.width / 2
                                            if (toPatternAnimation.to >= 0) {
                                                if (!toPatternAnimation.running) {
                                                    toPatternAnimation.start()
                                                }
                                            }
                                        }

                                        SpringAnimation {
                                            id: toPatternAnimation
                                            target: patternIndicate
                                            property: "x"
                                            from: patternIndicate.x
                                            spring: 5
                                            damping: 0.3
                                        }
                                    }

                                    IconImage {
                                        width: 15
                                        height: 15
                                        x: parent.pattern0X - width / 2
                                        anchors.verticalCenter: parent.verticalCenter
                                        source: "qrc:/Res/Icon/Pattern0.png"
                                        color: getGrayscaleColor(0.8)

                                        MouseArea {
                                            width: parent.width + 10
                                            height: parent.height + 10
                                            anchors.centerIn: parent
                                            hoverEnabled: true

                                            onEntered: {
                                                parent.color = "white"
                                            }

                                            onExited: {
                                                parent.color = getGrayscaleColor(
                                                            0.8)
                                            }

                                            onClicked: {
                                                if (!toPatternAnimation.running) {
                                                    portSettingLoader.item.modelData.pattern = 0
                                                    portSetting.flushLoaderData(
                                                                )
                                                }
                                            }
                                        }
                                    }

                                    IconImage {
                                        width: 15
                                        height: 15
                                        x: parent.pattern1X - width / 2
                                        anchors.verticalCenter: parent.verticalCenter
                                        source: "qrc:/Res/Icon/Pattern1.png"
                                        color: getGrayscaleColor(0.8)

                                        MouseArea {
                                            width: parent.width + 10
                                            height: parent.height + 10
                                            anchors.centerIn: parent
                                            hoverEnabled: true

                                            onEntered: {
                                                parent.color = "white"
                                            }

                                            onExited: {
                                                parent.color = getGrayscaleColor(
                                                            0.8)
                                            }

                                            onClicked: {
                                                if (!toPatternAnimation.running) {
                                                    portSettingLoader.item.modelData.pattern = 1
                                                    portSetting.flushLoaderData(
                                                                )
                                                }
                                            }
                                        }
                                    }

                                    IconImage {
                                        width: 15
                                        height: 15
                                        x: parent.pattern2X - width / 2
                                        anchors.verticalCenter: parent.verticalCenter
                                        source: "qrc:/Res/Icon/Pattern2.png"
                                        color: getGrayscaleColor(0.8)

                                        MouseArea {
                                            width: parent.width + 10
                                            height: parent.height + 10
                                            anchors.centerIn: parent
                                            hoverEnabled: true

                                            onEntered: {
                                                parent.color = "white"
                                            }

                                            onExited: {
                                                parent.color = getGrayscaleColor(
                                                            0.8)
                                            }

                                            onClicked: {
                                                if (!toPatternAnimation.running) {
                                                    portSettingLoader.item.modelData.pattern = 2
                                                    portSetting.flushLoaderData(
                                                                )
                                                }
                                            }
                                        }
                                    }
                                }

                                Rectangle {
                                    Layout.fillWidth: true
                                    Layout.preferredHeight: 25
                                    radius: 5
                                    color: getGrayscaleColor(0.3)

                                    Rectangle {
                                        anchors.fill: parent
                                        anchors.left: parent.left
                                        anchors.leftMargin: 10
                                        color: "transparent"

                                        RowLayout {
                                            anchors.fill: parent
                                            spacing: 5

                                            Rectangle {
                                                Layout.fillHeight: true
                                                Layout.preferredWidth: 60
                                                Layout.fillWidth: true
                                                color: "transparent"

                                                IconImage {
                                                    width: 15
                                                    height: 15
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 15
                                                    anchors.verticalCenter: parent.verticalCenter
                                                    color: "gray"
                                                    source: "qrc:/Res/Icon/ClearData.png"

                                                    MouseArea {
                                                        anchors.fill: parent
                                                        hoverEnabled: true

                                                        onClicked: {
                                                            portSettingLoader.item.modelData.rxNum = 0
                                                            portSettingLoader.item.modelData.txNum = 0
                                                            portSetting.flushLoaderData()
                                                        }

                                                        onEntered: {
                                                            parent.color = "red"
                                                        }

                                                        onExited: {
                                                            parent.color = "gray"
                                                        }
                                                    }
                                                }
                                            }

                                            Rectangle {
                                                Layout.fillHeight: true
                                                Layout.preferredWidth: 119
                                                color: "transparent"

                                                Text {
                                                    anchors.left: parent.left
                                                    anchors.verticalCenter: parent.verticalCenter
                                                    color: "white"
                                                    text: qsTr("RX:")
                                                          + portSettingLoader.item.modelData.rxNum
                                                }
                                            }

                                            Rectangle {
                                                Layout.fillHeight: true
                                                Layout.preferredWidth: 117
                                                color: "transparent"

                                                Text {
                                                    anchors.left: parent.left
                                                    anchors.verticalCenter: parent.verticalCenter
                                                    color: "white"
                                                    text: qsTr("TX: ")
                                                          + portSettingLoader.item.modelData.txNum
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        Rectangle {
            id: teminalDisplay
            Layout.fillHeight: true
            Layout.fillWidth: true
            color: "transparent"

            Rectangle {
                id: portInteractiveWindow
                anchors.fill: parent
                anchors.margins: 10
                anchors.topMargin: 30
                radius: 20
                color: getGrayscaleColor(0.3)

                property int layoutPattern: 0
                property int portInteractivePageModelCount: portList.count

                onPortInteractivePageModelCountChanged: {
                    if (portInteractiveWindow.layoutPattern
                            >= (portInteractivePageModelCount - 1)) {
                        portInteractiveWindow.layoutPattern--
                        if (portInteractiveWindow.layoutPattern < 0) {
                            portInteractiveWindow.layoutPattern = 0
                        }
                    }
                }

                function calculateWidth(index) {
                    var width = 0

                    switch (portInteractiveWindow.layoutPattern) {
                    case 0:
                        if (index === 0) {
                            width = portInteractiveWindow.width
                        }
                        break
                    case 1:
                        if (index <= 1) {
                            width = portInteractiveWindow.width / 2
                        }
                        break
                    case 2:
                        if (index <= 1) {
                            width = portInteractiveWindow.width / 2
                        } else if (index === 2) {
                            width = portInteractiveWindow.width
                        }
                        break
                    case 3:
                        if (index <= 3) {
                            width = portInteractiveWindow.width / 2
                        }
                        break
                    default:
                        break
                    }

                    return width
                }

                function calculateHeight(index) {
                    var height = 0

                    switch (portInteractiveWindow.layoutPattern) {
                    case 0:
                        if (index === 0) {
                            height = portInteractiveWindow.height
                        }
                        break
                    case 1:
                        if (index <= 1) {
                            height = portInteractiveWindow.height
                        }
                        break
                    case 2:
                        if (index <= 2) {
                            height = portInteractiveWindow.height / 2
                        }
                        break
                    case 3:
                        if (index <= 3) {
                            height = portInteractiveWindow.height / 2
                        }
                        break
                    default:
                        break
                    }

                    return height
                }

                function calculateMargins(index, location) {
                    var margins = 20

                    switch (portInteractiveWindow.layoutPattern) {
                    case 0:
                        break
                    case 1:
                        if (index === 0) {
                            if (location === "right") {
                                margins -= 10
                            }
                        } else if (index === 1) {
                            if (location === "left") {
                                margins -= 10
                            }
                        }
                        break
                    case 2:
                        if (index === 0) {
                            if (location === "right" || location === "bottom") {
                                margins -= 10
                            }
                        } else if (index === 1) {
                            if (location === "left" || location === "bottom") {
                                margins -= 10
                            }
                        } else if (index === 2) {
                            if (location === "top") {
                                margins -= 10
                            }
                        }
                        break
                    case 3:
                        if (index === 0) {
                            if (location === "right" || location === "bottom") {
                                margins -= 10
                            }
                        } else if (index === 1) {
                            if (location === "left" || location === "bottom") {
                                margins -= 10
                            }
                        } else if (index === 2) {
                            if (location === "right" || location === "top") {
                                margins -= 10
                            }
                        } else if (index === 3) {
                            if (location === "left" || location === "top") {
                                margins -= 10
                            }
                        }
                        break
                    default:
                        break
                    }

                    return margins
                }

                Flow {
                    anchors.fill: parent

                    Repeater {
                        id: portInteractiveRepeater
                        model: portList

                        Rectangle {
                            width: portInteractiveWindow.calculateWidth(index)
                            height: portInteractiveWindow.calculateHeight(index)
                            visible: (portSettingLoader.item.modelData.portName
                                      === "") ? false : index <= portInteractiveWindow.layoutPattern
                            color: "transparent"

                            Rectangle {
                                anchors.fill: parent
                                radius: 10
                                visible: (model.pattern === 2) ? false : true
                                anchors.rightMargin: portInteractiveWindow.calculateMargins(
                                                         index, "right")
                                anchors.leftMargin: portInteractiveWindow.calculateMargins(
                                                        index, "left")
                                anchors.topMargin: portInteractiveWindow.calculateMargins(
                                                       index, "top")
                                anchors.bottomMargin: portInteractiveWindow.calculateMargins(
                                                          index, "bottom")
                                color: getGrayscaleColor(0.15)

                                ColumnLayout {
                                    anchors.fill: parent
                                    spacing: 0

                                    Rectangle {
                                        Layout.fillHeight: true
                                        Layout.fillWidth: true
                                        radius: 10
                                        color: "transparent"

                                        Flickable {
                                            anchors.fill: parent
                                            anchors.bottomMargin: 40
                                            clip: true
                                            contentHeight: textEditContentHeight

                                            property int textEditContentHeight: 0

                                            TextEdit {
                                                objectName: model.portName + "PortInteractive"
                                                anchors.fill: parent
                                                wrapMode: TextEdit.WordWrap
                                                readOnly: (model.pattern === 1) ? false : true
                                                focus: (model.pattern === 1) ? true : false
                                                cursorVisible: (model.pattern === 1) ? true : false
                                                color: "white"
                                                padding: 10
                                                textFormat: TextEdit.RichText

                                                property int pattern: model.pattern
                                                property int isPaus: model.isPaus

                                                onContentHeightChanged: {
                                                    parent.parent.textEditContentHeight
                                                            = contentHeight + cursorRectangle.height
                                                }

                                                onCursorPositionChanged: {
                                                    if (!model.rollDisable) {
                                                        var cursorY = cursorRectangle.y
                                                        var cursorHeight = cursorRectangle.height

                                                        if (cursorY + cursorHeight > parent.parent.contentY + parent.parent.height) {
                                                            parent.parent.contentY = cursorY + cursorHeight - parent.parent.height + cursorHeight
                                                        }
                                                    }
                                                }

                                                MouseArea {
                                                    anchors.fill: parent
                                                    hoverEnabled: true
                                                    acceptedButtons: Qt.AllButtons
                                                    cursorShape: Qt.IBeamCursor

                                                    onPressed: event => {
                                                                   // event.accepted = false
                                                                   portList.portListFocusIndex
                                                                   = portList.findPortIndex(
                                                                       model.portName)
                                                               }
                                                }

                                                Keys.onPressed: event => {
                                                                    if (model.pattern !== 1) {
                                                                        return
                                                                    }

                                                                    switch (event.key) {
                                                                        case Qt.Key_Left:
                                                                        case Qt.Key_Right:
                                                                        case Qt.Key_Up:
                                                                        case Qt.Key_Down:
                                                                        case Qt.Key_Backspace:
                                                                        Teminal.SerialPortTx(
                                                                            model.portName,
                                                                            event.key)
                                                                        break
                                                                        case Qt.Key_Space:
                                                                        default:
                                                                        Teminal.SerialPortTx(
                                                                            model.portName,
                                                                            event.text)
                                                                        break
                                                                    }
                                                                    event.accepted = true
                                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            Rectangle {
                                anchors.fill: parent
                                radius: 10
                                visible: (model.pattern === 2) ? true : false
                                anchors.rightMargin: portInteractiveWindow.calculateMargins(
                                                         index, "right")
                                anchors.leftMargin: portInteractiveWindow.calculateMargins(
                                                        index, "left")
                                anchors.topMargin: portInteractiveWindow.calculateMargins(
                                                       index, "top")
                                anchors.bottomMargin: portInteractiveWindow.calculateMargins(
                                                          index, "bottom")
                                color: "transparent"

                                ChartView {
                                    title: model.portName
                                    titleColor: getGrayscaleColor(0.5)
                                    anchors.fill: parent
                                    anchors.margins: 20
                                    backgroundColor: "transparent"
                                    antialiasing: false
                                    animationOptions: ChartView.NoAnimation
                                    legend.labelColor: getGrayscaleColor(0.5)

                                    property real xAxisDisRange: 20
                                    property real yAxisDisRange: 10

                                    property var xAxis: null
                                    property var yAxis: null

                                    property int isPaus: model.isPaus

                                    Component.onCompleted: {
                                        xAxis = Qt.createQmlObject(
                                                    'import QtCharts 2.15; ValuesAxis {}',
                                                    this)
                                        yAxis = Qt.createQmlObject(
                                                    'import QtCharts 2.15; ValuesAxis {}',
                                                    this)

                                        xAxis.tickCount = 11
                                        yAxis.tickCount = 11

                                        xAxis.gridLineColor = "black"
                                        xAxis.labelsColor = "white"

                                        yAxis.gridLineColor = "black"
                                        yAxis.labelsColor = "white"
                                    }
                                }
                            }

                            Rectangle {
                                width: parent.width - 40
                                height: 50
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 20
                                anchors.horizontalCenter: parent.horizontalCenter
                                color: "transparent"
                                visible: opacity ? true : false
                                opacity: 1

                                property int curPattern: model.pattern

                                onCurPatternChanged: {
                                    var opacityAnimation
                                    var heightAnimation
                                    if ((model.pattern === 0
                                         || model.pattern === 2)
                                            && opacity === 0) {
                                        opacityAnimation = Qt.createQmlObject(
                                                    'import QtQuick 2.0;
NumberAnimation {
property: "opacity"; from: 0; to: 1; duration: 500
}', this)
                                        heightAnimation = Qt.createQmlObject(
                                                    'import QtQuick 2.0;
SpringAnimation {
property: "height"; to: 50; spring: 5; damping: 0.2
}', this)
                                        opacityAnimation.target = this
                                        heightAnimation.target = this
                                        opacityAnimation.start()
                                        heightAnimation.start()
                                    } else if (model.pattern === 1
                                               && opacity === 1) {
                                        opacityAnimation = Qt.createQmlObject(
                                                    'import QtQuick 2.0;
NumberAnimation {
property: "opacity"; from: 1; to: 0; duration: 500
}', this)
                                        heightAnimation = Qt.createQmlObject(
                                                    'import QtQuick 2.0;
NumberAnimation {
property: "height"; from: 50; to: 0; duration: 500
}', this)
                                        opacityAnimation.target = this
                                        heightAnimation.target = this
                                        opacityAnimation.start()
                                        heightAnimation.start()
                                    }
                                }

                                RowLayout {
                                    width: parent.width - 40
                                    height: parent.height
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.left: parent.left
                                    spacing: 0

                                    Rectangle {
                                        Layout.fillHeight: true
                                        Layout.fillWidth: true
                                        color: "transparent"

                                        Rectangle {
                                            anchors.fill: parent
                                            anchors.margins: 10
                                            anchors.rightMargin: 5
                                            radius: 5
                                            color: getGrayscaleColor(1)

                                            TextField {
                                                anchors.fill: parent
                                                placeholderText: model.portName + ">:"
                                                font.pixelSize: 13
                                                verticalAlignment: Qt.AlignVCenter

                                                background: Rectangle {
                                                    color: "transparent"
                                                }

                                                Timer {
                                                    interval: parseInt(
                                                                  model.autoSendInterval)
                                                    running: model.isAutoSend
                                                    repeat: true
                                                    onTriggered: {
                                                        if (parent.text !== "") {
                                                            Teminal.SerialPortTx(
                                                                        model.portName,
                                                                        parent.text)
                                                        }
                                                    }
                                                }

                                                property var history: []
                                                property int historyIndex: -1

                                                Keys.onUpPressed: {
                                                    if (history.length > 0
                                                            && historyIndex < history.length - 1) {
                                                        historyIndex++
                                                        text = history[historyIndex]
                                                    }
                                                }

                                                Keys.onDownPressed: {
                                                    if (history.length > 0
                                                            && historyIndex > 0) {
                                                        historyIndex--
                                                        text = history[historyIndex]
                                                    }
                                                }

                                                onAccepted: {
                                                    if (text !== "") {
                                                        history.unshift(text)
                                                        if (history[historyIndex] !== text) {
                                                            if (history.length > 10) {
                                                                history.pop()
                                                            }
                                                            historyIndex = -1
                                                        }
                                                        Teminal.SerialPortTx(
                                                                    model.portName,
                                                                    text)
                                                        text = ""
                                                    }
                                                }

                                                IconImage {
                                                    source: "qrc:/Res/Icon/submit.png"
                                                    width: parent.height - 4
                                                    height: parent.height - 4
                                                    anchors.right: parent.right
                                                    anchors.rightMargin: 4
                                                    anchors.verticalCenter: parent.verticalCenter
                                                    color: getGrayscaleColor(
                                                               0.5)

                                                    MouseArea {
                                                        anchors.fill: parent
                                                        hoverEnabled: true

                                                        onEntered: {
                                                            parent.color = getGrayscaleColor(
                                                                        0.2)
                                                        }

                                                        onExited: {
                                                            parent.color = getGrayscaleColor(
                                                                        0.5)
                                                        }

                                                        onClicked: {
                                                            Teminal.SerialPortTx(
                                                                        model.portName,
                                                                        parent.parent.text)
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    Rectangle {
                                        Layout.fillHeight: true
                                        Layout.preferredWidth: preferredWidth
                                        color: "transparent"

                                        property int curPattern: model.pattern
                                        property int preferredWidth: 150

                                        onCurPatternChanged: {
                                            var preferredWidthAnimation
                                            if (model.pattern === 2
                                                    && preferredWidth === 0) {
                                                preferredWidthAnimation = Qt.createQmlObject(
                                                            'import QtQuick 2.0;
SpringAnimation {
property: "preferredWidth"; to: 150; spring: 6; damping: 0.3
}', this)
                                                preferredWidthAnimation.target = this
                                                preferredWidthAnimation.start()
                                            } else if (model.pattern === 0
                                                       && preferredWidth !== 0) {
                                                preferredWidthAnimation = Qt.createQmlObject(
                                                            'import QtQuick 2.0;
NumberAnimation {
property: "preferredWidth"; from: 150; to: 0; duration: 300
}', this)
                                                preferredWidthAnimation.target = this
                                                preferredWidthAnimation.start()
                                            }
                                        }

                                        Rectangle {
                                            anchors.fill: parent
                                            anchors.margins: 10
                                            anchors.rightMargin: 5
                                            radius: 5
                                            color: getGrayscaleColor(1)

                                            TextField {
                                                anchors.fill: parent
                                                placeholderText: "监控变量" + ">:"
                                                font.pixelSize: 13
                                                verticalAlignment: Qt.AlignVCenter

                                                background: Rectangle {
                                                    color: "transparent"
                                                }

                                                onAccepted: {
                                                    if (text !== "") {
                                                        Teminal.AddNewLine(
                                                                    model.portName,
                                                                    text)
                                                        text = ""
                                                    }
                                                }
                                            }
                                        }
                                    }

                                    Rectangle {
                                        Layout.fillHeight: true
                                        Layout.preferredWidth: 40
                                        color: "transparent"

                                        IconImage {
                                            source: model.isPaus ? "qrc:/Res/Icon/Pause.png" : "qrc:/Res/Icon/Continue.png"
                                            anchors.fill: parent
                                            anchors.margins: 10
                                            anchors.leftMargin: 5
                                            anchors.verticalCenter: parent.verticalCenter
                                            anchors.horizontalCenter: parent.horizontalCenter
                                            color: "green"

                                            MouseArea {
                                                anchors.fill: parent
                                                hoverEnabled: true

                                                onEntered: {
                                                    parent.color = "blue"
                                                }

                                                onExited: {
                                                    parent.color = "green"
                                                }

                                                onClicked: {
                                                    model.isPaus = !model.isPaus
                                                }
                                            }
                                        }
                                    }
                                }
                            }

                            Rectangle {
                                width: 45
                                height: 45
                                anchors.right: parent.right
                                anchors.rightMargin: 20
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 23
                                color: "transparent"

                                IconImage {
                                    source: "qrc:/Res/Icon/Clear.png"
                                    anchors.fill: parent
                                    anchors.margins: 10
                                    anchors.leftMargin: 5
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    color: "green"

                                    MouseArea {
                                        anchors.fill: parent
                                        hoverEnabled: true

                                        onEntered: {
                                            parent.color = "red"
                                        }

                                        onExited: {
                                            parent.color = "green"
                                        }

                                        onClicked: {
                                            if (model.pattern === 2) {
                                                portLineClearData(
                                                            model.portName)
                                            } else {
                                                portClearText(model.portName)
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            Rectangle {
                id: layoutPatternDemo
                anchors.fill: parent
                anchors.margins: 10
                anchors.topMargin: 30
                color: "transparent"
                opacity: 0

                ParallelAnimation {
                    id: layoutPatternDemoShow
                    NumberAnimation {
                        target: layoutPatternDemo
                        property: "opacity"
                        from: 0.0
                        to: 1.0
                        duration: 300
                    }
                }

                ParallelAnimation {
                    id: layoutPatternDemoHide
                    NumberAnimation {
                        target: layoutPatternDemo
                        property: "opacity"
                        from: 1.0
                        to: 0.0
                        duration: 300
                    }
                }

                Rectangle {
                    id: layoutPatternDemo0
                    anchors.fill: parent
                    color: "transparent"
                    visible: false

                    Rectangle {
                        radius: 10
                        width: parent.width - 40
                        height: parent.height - 40
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("0")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }
                }

                Rectangle {
                    id: layoutPatternDemo1
                    anchors.fill: parent
                    color: "transparent"
                    visible: false

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height - 40
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("0")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height - 40
                        anchors.top: parent.top
                        anchors.right: parent.right
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("1")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }
                }

                Rectangle {
                    id: layoutPatternDemo2
                    anchors.fill: parent
                    color: "transparent"
                    visible: false

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height / 2 - 30
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("1")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height / 2 - 30
                        anchors.top: parent.top
                        anchors.right: parent.right
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("2")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }

                    Rectangle {
                        radius: 10
                        width: parent.width - 40
                        height: parent.height / 2 - 30
                        anchors.bottom: parent.bottom
                        anchors.right: parent.right
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("0")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }
                }

                Rectangle {
                    id: layoutPatternDemo3
                    anchors.fill: parent
                    color: "transparent"
                    visible: false

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height / 2 - 30
                        anchors.top: parent.top
                        anchors.left: parent.left
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("0")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height / 2 - 30
                        anchors.top: parent.top
                        anchors.right: parent.right
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("1")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height / 2 - 30
                        anchors.bottom: parent.bottom
                        anchors.left: parent.left
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("2")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }

                    Rectangle {
                        radius: 10
                        width: parent.width / 2 - 30
                        height: parent.height / 2 - 30
                        anchors.bottom: parent.bottom
                        anchors.right: parent.right
                        anchors.margins: 20
                        color: getGrayscaleColor(0.4)

                        Text {
                            text: qsTr("3")
                            font.pixelSize: 30
                            color: getGrayscaleColor(0.6)
                            anchors.centerIn: parent
                        }
                    }
                }
            }

            IconImage {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 5
                width: 25
                height: 25
                color: (isFocus === true) ? "white" : "gray"
                source: "qrc:/Res/Icon/more.png"

                property bool isFocus: false

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    acceptedButtons: Qt.AllButtons

                    onEntered: {
                        parent.isFocus = true
                    }

                    onExited: {
                        parent.isFocus = false
                    }

                    onClicked: function (mouse) {
                        if (mouse.button === Qt.LeftButton) {
                            if (teminalControl.Layout.preferredWidth === 300) {
                                teminalControlHideAnimation.start()
                            } else if (teminalControl.Layout.preferredWidth === 0) {
                                teminalControlShowAnimation.start()
                            }
                        } else if (mouse.button === Qt.RightButton) {
                            if (layoutMenu.opacity === 0) {
                                layoutMenuShow.running = true
                            }
                        }
                    }
                }
            }

            Rectangle {
                id: layoutMenu
                width: 25
                height: 120
                radius: 5
                opacity: 0
                anchors.leftMargin: 30
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                color: getGrayscaleColor(0.4)

                ParallelAnimation {
                    id: layoutMenuShow
                    running: false
                    SpringAnimation {
                        target: layoutMenu
                        property: "width"
                        from: 0.0
                        to: 25
                        spring: 5
                        damping: 0.3
                    }
                    NumberAnimation {
                        target: layoutMenu
                        property: "opacity"
                        from: 0.0
                        to: 1.0
                        duration: 800
                    }
                }

                ParallelAnimation {
                    id: layoutMenuHide
                    running: false
                    SpringAnimation {
                        target: layoutMenu
                        property: "width"
                        from: 25
                        to: 0
                        spring: 5
                        damping: 0.3
                    }
                    NumberAnimation {
                        target: layoutMenu
                        property: "opacity"
                        from: 1
                        to: 0
                        duration: 800
                    }
                }

                ColumnLayout {
                    anchors.fill: parent
                    spacing: 5
                    visible: (layoutMenu.opacity === 1) ? true : false

                    IconImage {
                        source: "qrc:/Res/Icon/Layout0.png"
                        Layout.preferredHeight: 23
                        Layout.preferredWidth: 23
                        color: (isFocus === true) ? "white" : getGrayscaleColor(
                                                        0.8)

                        property bool isFocus: false

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {
                                layoutMenuHide.running = true
                                portInteractiveWindow.layoutPattern = 0
                            }

                            onEntered: {
                                parent.isFocus = true
                                layoutPatternDemo.color = portInteractiveWindow.color
                                layoutPatternDemo0.visible = true
                                layoutPatternDemoShow.running = true
                            }

                            onExited: {
                                parent.isFocus = false
                                layoutPatternDemo.color = "transparent"
                                layoutPatternDemo0.visible = false
                                layoutPatternDemoHide.running = true
                            }
                        }
                    }

                    IconImage {
                        source: "qrc:/Res/Icon/Layout1.png"
                        Layout.preferredHeight: 23
                        Layout.preferredWidth: 23
                        color: (isFocus === true) ? "white" : getGrayscaleColor(
                                                        0.8)

                        property bool isFocus: false

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {
                                layoutMenuHide.running = true
                                if (portList.count > 1) {
                                    portInteractiveWindow.layoutPattern = 1
                                }
                            }

                            onEntered: {
                                if (portList.count > 1) {
                                    parent.isFocus = true
                                    layoutPatternDemo.color = portInteractiveWindow.color
                                    layoutPatternDemo1.visible = true
                                    layoutPatternDemoShow.running = true
                                }
                            }

                            onExited: {
                                if (portList.count > 1) {
                                    parent.isFocus = false
                                    layoutPatternDemo.color = "transparent"
                                    layoutPatternDemo1.visible = false
                                    layoutPatternDemoHide.running = true
                                }
                            }
                        }
                    }

                    IconImage {
                        source: "qrc:/Res/Icon/Layout2.png"
                        Layout.preferredHeight: 23
                        Layout.preferredWidth: 23
                        color: (isFocus === true) ? "white" : getGrayscaleColor(
                                                        0.8)

                        property bool isFocus: false

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {
                                layoutMenuHide.running = true
                                if (portList.count > 2) {
                                    portInteractiveWindow.layoutPattern = 2
                                }
                            }

                            onEntered: {
                                if (portList.count > 2) {
                                    parent.isFocus = true
                                    layoutPatternDemo.color = portInteractiveWindow.color
                                    layoutPatternDemo2.visible = true
                                    layoutPatternDemoShow.running = true
                                }
                            }

                            onExited: {
                                if (portList.count > 2) {
                                    parent.isFocus = false
                                    layoutPatternDemo.color = "transparent"
                                    layoutPatternDemo2.visible = false
                                    layoutPatternDemoHide.running = true
                                }
                            }
                        }
                    }

                    IconImage {
                        source: "qrc:/Res/Icon/Layout3.png"
                        Layout.preferredHeight: 23
                        Layout.preferredWidth: 23
                        color: (isFocus === true) ? "white" : getGrayscaleColor(
                                                        0.8)

                        property bool isFocus: false

                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true

                            onClicked: {
                                layoutMenuHide.running = true
                                if (portList.count > 3) {
                                    portInteractiveWindow.layoutPattern = 3
                                }
                            }

                            onEntered: {
                                if (portList.count > 3) {
                                    parent.isFocus = true
                                    layoutPatternDemo.color = portInteractiveWindow.color
                                    layoutPatternDemo3.visible = true
                                    layoutPatternDemoShow.running = true
                                }
                            }

                            onExited: {
                                if (portList.count > 3) {
                                    parent.isFocus = false
                                    layoutPatternDemo.color = "transparent"
                                    layoutPatternDemo3.visible = false
                                    layoutPatternDemoHide.running = true
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
